<!DOCTYPE html>

<style>
@import "resources/width-keyword-classes.css";
@import "resources/intrinsic-size-contribution.css";

.fixed {
    width: 50px;
}

.percent {
    width: 50%;
}
</style>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>

<body onload="checkLayout('.container')">
<div id=log></div>

<!-- min-content contribution of fixed sizes -->
<div class="container min-content" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30">
    <div class="item fixed" data-expected-width="50" data-expected-height="30"></div>
</div>

<div class="container min-content" data-expected-width="70" data-expected-height="50" data-expected-client-width="60" data-expected-client-height="40">
    <div class="item fixed border" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30"></div>
</div>

<div class="container min-content" data-expected-width="80" data-expected-height="60" data-expected-client-width="70" data-expected-client-height="50">
    <div class="item fixed padding" data-expected-width="70" data-expected-height="50" data-expected-client-width="70" data-expected-client-height="50"></div>
</div>

<div class="container min-content" data-expected-width="100" data-expected-height="80" data-expected-client-width="90" data-expected-client-height="70">
    <div class="item fixed margin" data-expected-width="50" data-expected-height="30" data-expected-client-width="50" data-expected-client-height="30"></div>
</div>

<div class="container min-content" data-expected-width="90" data-expected-height="70" data-expected-client-width="80" data-expected-client-height="60">
    <div class="item fixed border padding" data-expected-width="80" data-expected-height="60" data-expected-client-width="70" data-expected-client-height="50"></div>
</div>

<div class="container min-content" data-expected-width="110" data-expected-height="90" data-expected-client-width="100" data-expected-client-height="80">
    <div class="item fixed border margin" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30"></div>
</div>

<div class="container min-content" data-expected-width="130" data-expected-height="110" data-expected-client-width="120" data-expected-client-height="100">
    <div class="item fixed border padding margin" data-expected-width="80" data-expected-height="60" data-expected-client-width="70" data-expected-client-height="50"></div>
</div>

<!-- min-content contribution of definite percentages -->
<div class="container min-content" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30">
    <div style="width: 50px;">
        <div class="item percent" data-expected-width="25" data-expected-height="30"></div>
    </div>
</div>

<div class="container min-content" data-expected-width="70" data-expected-height="50" data-expected-client-width="60" data-expected-client-height="40">
    <div style="width: 60px;">
        <div class="item percent border" data-expected-width="40" data-expected-height="40" data-expected-client-width="30" data-expected-client-height="30"></div>
    </div>
</div>

<div class="container min-content" data-expected-width="80" data-expected-height="60" data-expected-client-width="70" data-expected-client-height="50">
    <div style="width: 70px;">
        <div class="item percent padding" data-expected-width="55" data-expected-height="50" data-expected-client-width="55" data-expected-client-height="50"></div>
    </div>
</div>

<div class="container min-content" data-expected-width="100" data-expected-height="80" data-expected-client-width="90" data-expected-client-height="70">
    <div style="width: 90px;">
        <div class="item percent margin" data-expected-width="45" data-expected-height="30" data-expected-client-width="45" data-expected-client-height="30"></div>
    </div>
</div>

<div class="container min-content" data-expected-width="90" data-expected-height="70" data-expected-client-width="80" data-expected-client-height="60">
    <div style="width: 80px;">
        <div class="item percent border padding" data-expected-width="70" data-expected-height="60" data-expected-client-width="60" data-expected-client-height="50"></div>
    </div>
</div>

<div class="container min-content" data-expected-width="110" data-expected-height="90" data-expected-client-width="100" data-expected-client-height="80">
    <div style="width: 100px;">
        <div class="item percent border margin" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30"></div>
    </div>
</div>

<div class="container min-content" data-expected-width="130" data-expected-height="110" data-expected-client-width="120" data-expected-client-height="100">
    <div style="width: 120px;">
        <div class="item percent border padding margin" data-expected-width="90" data-expected-height="60" data-expected-client-width="80" data-expected-client-height="50"></div>
    </div>
</div>

<!-- max-content contribution of fixed sizes -->
<div class="container max-content" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30">
    <div class="item fixed" data-expected-width="50" data-expected-height="30"></div>
</div>

<div class="container max-content" data-expected-width="70" data-expected-height="50" data-expected-client-width="60" data-expected-client-height="40">
    <div class="item fixed border" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30"></div>
</div>

<div class="container max-content" data-expected-width="80" data-expected-height="60" data-expected-client-width="70" data-expected-client-height="50">
    <div class="item fixed padding" data-expected-width="70" data-expected-height="50" data-expected-client-width="70" data-expected-client-height="50"></div>
</div>

<div class="container max-content" data-expected-width="100" data-expected-height="80" data-expected-client-width="90" data-expected-client-height="70">
    <div class="item fixed margin" data-expected-width="50" data-expected-height="30" data-expected-client-width="50" data-expected-client-height="30"></div>
</div>

<div class="container max-content" data-expected-width="90" data-expected-height="70" data-expected-client-width="80" data-expected-client-height="60">
    <div class="item fixed border padding" data-expected-width="80" data-expected-height="60" data-expected-client-width="70" data-expected-client-height="50"></div>
</div>

<div class="container max-content" data-expected-width="110" data-expected-height="90" data-expected-client-width="100" data-expected-client-height="80">
    <div class="item fixed border margin" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30"></div>
</div>

<div class="container max-content" data-expected-width="130" data-expected-height="110" data-expected-client-width="120" data-expected-client-height="100">
    <div class="item fixed border padding margin" data-expected-width="80" data-expected-height="60" data-expected-client-width="70" data-expected-client-height="50"></div>
</div>

<!-- max-content contribution of definite percentages -->
<div class="container max-content" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30">
    <div style="width: 50px;">
        <div class="item percent" data-expected-width="25" data-expected-height="30"></div>
    </div>
</div>

<div class="container max-content" data-expected-width="70" data-expected-height="50" data-expected-client-width="60" data-expected-client-height="40">
    <div style="width: 60px;">
        <div class="item percent border" data-expected-width="40" data-expected-height="40" data-expected-client-width="30" data-expected-client-height="30"></div>
    </div>
</div>

<div class="container max-content" data-expected-width="80" data-expected-height="60" data-expected-client-width="70" data-expected-client-height="50">
    <div style="width: 70px;">
        <div class="item percent padding" data-expected-width="55" data-expected-height="50" data-expected-client-width="55" data-expected-client-height="50"></div>
    </div>
</div>

<div class="container max-content" data-expected-width="100" data-expected-height="80" data-expected-client-width="90" data-expected-client-height="70">
    <div style="width: 90px;">
        <div class="item percent margin" data-expected-width="45" data-expected-height="30" data-expected-client-width="45" data-expected-client-height="30"></div>
    </div>
</div>

<div class="container max-content" data-expected-width="90" data-expected-height="70" data-expected-client-width="80" data-expected-client-height="60">
    <div style="width: 80px;">
        <div class="item percent border padding" data-expected-width="70" data-expected-height="60" data-expected-client-width="60" data-expected-client-height="50"></div>
    </div>
</div>

<div class="container max-content" data-expected-width="110" data-expected-height="90" data-expected-client-width="100" data-expected-client-height="80">
    <div style="width: 100px;">
        <div class="item percent border margin" data-expected-width="60" data-expected-height="40" data-expected-client-width="50" data-expected-client-height="30"></div>
    </div>
</div>

<div class="container max-content" data-expected-width="130" data-expected-height="110" data-expected-client-width="120" data-expected-client-height="100">
    <div style="width: 120px;">
        <div class="item percent border padding margin" data-expected-width="90" data-expected-height="60" data-expected-client-width="80" data-expected-client-height="50"></div>
    </div>
</div>

</body>
